<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮轮番图</title>

    <link rel="stylesheet" href="css/北大青鸟课程导航.css">

    <style>
        *{list-style: none}
        .box{width: 800px;margin: 50px auto}
        .box .text  li{border: 1px solid #cccccc;
            width: 20px;
            display: inline-block;
            text-align: center;
            background-color: white;
            cursor: pointer}  /*这个是每一个li添加小手状*/

        .img{position: relative}
        .text{position: absolute;bottom: 5px;right:447px}
        .box .text li:hover{background-color: red}

        .box .text li:nth-of-type(3){background-color: red}



    </style>
</head>
<body>

    <div class="box">

    <div class="img">

     <img src="img/按钮轮番图.jpg" width="426" height="130">


    <ul class="text">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>
    </div>
</div>

</body>
</html>